页面

没有，呵呵，只用于测试。

样式表

……
#indextop_globalnavmenu li
{
	width: 77px;
	height: 17px;
	float: left; 
	text-align: center;
	margin: 0;
}
#indextop_globalnavmenu li a
{
	color: #000;
	display: block; 
	width: 77px;
	height: 17px;
	text-align: center;
	text-decoration: none;
	background-image: url(http://www.woxun.com/Files/BeyondPic/200503/20050309093104130.jpg) ;
                background-repeat: no-repeat;
}
#indextop_globalnavmenu li a:hover
{
	color: #ED1C24;
	width: 77px;
	height: 17px;
	text-align: center;
	background-image:url(http://www.woxun.com/Files/BeyondPic/200503/20050309093104669.jpg) ;
                background-repeat: no-repeat;
	text-decoration: none;
}

　　好了，导航出来了，但是发现样式表重复很多，后来通过测试知道，下层继承上层的样式，哎呀概念我不说了，我说不准确，ajie帮我说吧。所以清除多于的代码，尽量减少重复且无意义的代码，字体在body中定义，加上控制字体在li中padding，图片位置的样式，重新整理代码为：

样式表

……
#indextop_globalnavmenu li
{
	width: 77px;
	height: 17px;
	FLOAT: left; 
	TEXT-ALIGN: center;
	margin: 0;
}
#indextop_globalnavmenu li a
{
	color: #000;
	display: block; 
	width: 77px;
	height: 17px;
	text-decoration: none;
	background-image: url(http://www.woxun.com/Files/BeyondPic/200503/20050309093104130.jpg) ;
                background-repeat: no-repeat;
}
#indextop_globalnavmenu li a:hover
{
	color: #ED1C24;
	background:url(http://www.woxun.com/Files/BeyondPic/200503/20050309093104669.jpg) ;
	text-decoration: none;
                background-repeat: no-repeat;
}

/* ---主导航第一行--- */
#indextop_globalnavmenu li#first A
{
	padding: 6px 0 0 0;
	background-position: 0px 3px;
}
#indextop_globalnavmenu li#first A:hover
{
	padding: 6px 0 0 0;
	background-position: 0px 3px;
}
/* ---主导航第二行--- */
#indextop_globalnavmenu li#second A
{
	padding: 3px 0 0 0;
}
#indextop_globalnavmenu li#second A:hover
{
	padding: 3px 0 0 0;
}
/* -----------正文上----------- */
/* ---广告条--- */
#indexcontent_shadow
{
	position: absolute;
	z-index: 1;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 10px;
	background-image: url(http://www.woxun.com/Files/BeyondPic/200503/20050309093104930.gif);
	background-repeat: repeat-x;
	left: 0px;
	top: 130px !important;
	top: 127px;
}

　　剩下的就是反复调试，这里由于这是以前的代码加修改后的图片，所以有问题，我稍稍调了一下，还不准确。

　　搞定了，页头基本上完毕，下面是阴影，阴影我用了一下absolute，因为要置与广告下，对absolute的理解也不是很透彻，使用过程中，发现div完全不居于现有的排版，它可在上重叠，也可以在下重叠，结合曾经用过的层的z-index，我对absolute的理解是它使一块脱离然后飞起来飘，更形象的理解是：你在一个平面内排版，absolute就使某一块脱离这个平面，可上可下，在于z-index的设置，既然飞起来了，不同z-index之间就不存在margin了。

　　将广告图片和其上阴影一起切下，开始做内容，一样，首先分析。

　　这里根据设计稿，我将内容分成三块，上中下三个大div，第一个div到草绿色结束，先攻它。
　　广告我暂时看作内容非表现，所以直接插入img，没什么说明。

页面


     

          

     
[div]

样式表

#indexcontent_top
{
	position:relative;
	z-index: 2;
	margin: 0 auto;
	padding: 0;
	width:770px;
	height: 407px;
}
#indexcontent_top ul
{
	clear: left;
	margin: 0;
	padding: 0;
	width:770px;
	LIST-STYLE-TYPE: none;
}
#indexcontent_top li#ad
{
	float: left;
	clear: left;
	margin: 0;
	padding: 0;
	width:770px;
	height:105px;
	background: #000;
}

　　然后自然是左边一块放登陆，右边一块放内容新闻，我嵌套div，这里学习float的使用，简单，我看过向左走、向右走滴，过程中我还定义过float: center;，似乎没作用，一直很奇怪，然后忘了删，后来验证，不要脸的w3告诉我float没center这个东西，这不违法了吗？，给左右，却不给中，TNND。笑过，看代码：

页面

……

     

          

     
     

     

样式表

……
/* ---登陆区域--- */
#indexcontent_top_form
{
	float: left;
	margin:0;
	padding:0;
	width:150px;
	height:302px;
	background-color: #9c0;
}
/* ---内容新闻区域---*/
#indexcontent_top_adnewscontent
{
	float: right;
	margin: 0;
	padding: 0;
	width: 620px;
	height: 302px;
                background-color: #09C;
}

　　其实这里发现一个问题，注意那个广告下的黑条，高度是10px，我本来是在li完广告图片后，加了一个li，定义高度为10px，黑色。但是该死的IE，表格中的BUG继续带入DIV，那就是不能低于15px，在表格中，如果想低于15px定义，典型的老掉牙例子是表格画线，我们解决办法两个，一是插入1px/0px或0px/1px的不存在图片，一般这种方法N年前就不用了，另外一种就是去除td间的 字符就可以了。但现在我找不到好的解决办法，div怎么不放个 字符让我去删嘛，多好。我试了下加入不存在图片，可以了。但是那样好委屈哦。经过思考，在我页面的特定情况下，我找到了办法，注意我的li#id设置，广告是100px，我将li高度设置成105，背景黑色，好了，5px黑色出来了。后来我还可以用控制padding和margin的办法控制低于15px的显示，但是这始终不是很方便和通用的解决办法，比如又回到表格那个例子，空白页面中用一个无依无靠，孤孤单单的div怎么画背景线？

　　终于，一天结束了，我还清晰的记得那天回家路上，我短信徒弟：重构没价值，不学了，还是攻.net实在。我很嚣张的对徒弟说：等不到一周一个月了，明天我就可以完成，一个两天就可以学会的技术有什么价值？而且我还是做的一个门户站点首页。

　　然而实际上，第二天，我几乎放弃……

爆牙齿 2004 8 6


　　1、回头想想，如果是表格做导航，不但代码相对超多，而且图片必须重复切割，比如我有17个栏目，我就得切34张图片，浏览时也就要下载34张图片，然而用样式表，同样的情况只需要定义2个简单a和a:hover，加上仅两张图片就完成，而且字体是文本非图片。操作时，在页面只需要控制好一个，然后就是复制，设计时，表现与结构内容在头脑中也彻底分开，看页面上则只控制结构和内容，看样式表则只控制表现，思路非常清楚有条理。
　　2、导航在IE和Opera正确显示，在Mozillo上却有明显差异，这个怎么解决？!important没用了。差异看我第一帖的三图。
　　2、关于导航，其实我的代码是没有通过验证的，原因是id重复，我使用了一堆id="first"和一堆id="second"。后来修改时，我把设置li的padding思路换为设置上一层的margin后，就做到了对17个li只用一个样式，id都不用了。这里我给出导航验证后的代码，自己看了，不说了：

页面


     

          

	
金桥工程
	
金关工程
	
金卡工程
	
金税工程
	
金农工程
	
金智工程
	
金卫工程
	
金宏工程
	
金盾工程
	
金贸工程
	
金水工程
	
金旅工程
	
金财工程
	
金审工程
	
金保工程
	
金土工程
	
返回首页
          
     

样式表

/* ---主导航--- */
#indextop_globalnav
{
	position:relative;
	height: 43px;
	padding: 1px;
	border: 0;
	background:url(/images/default/bg_03.jpg);
}
#indextop_globalnavmenu
{
	position:relative;
	margin: 0 auto;
	padding: 3px 0 0 0 !important;
	padding: 4px 0 0 0;
	width: 770px;
	height: 43px;
}
#indextop_globalnavmenu ul
{
	margin: 0; 
	padding: 0; 
	list-style-type: none;
}
#indextop_globalnavmenu li
{
	float: left; 
	width: 77px;
	height: 20px;
}
#indextop_globalnavmenu li a
{
	display: block; 
	margin: 0;
	padding: 3px 0 0 0;
	color: #000;
	background:url(/images/default/bg_01.jpg) no-repeat;
}
#indextop_globalnavmenu li a:hover
{
	color: #ED1C24;
	background:url(/images/default/bg_04.jpg) no-repeat;
}